class shopping {
    constructor() {
        this.$('#shopcar').addEventListener('click', this.tianjiagwc)
        this.getxx()
        this.ysdl()
    }
    // 右上角登录的点击事件
    ysdl = () => {
        let dl = this.$('#ysdl')
        // let zc = this.$('#zhuce')
        let name = localStorage.getItem('nickname')
        // console.log(name);
        // console.log(zc);
        if (name) {
            dl.innerHTML = name
            // zc.innerHTML = `<img src="../../html/课上代码/icon1.jpg" alt="" width='20px' height='20px'>`
        }
    }
    async getxx() {
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

        let res = await axios.get('http://localhost:8888/goods/item', {
            params: {
                id: localStorage.getItem('gid')
            }
        })
        // let { data, status } = res
        // console.log(res);
        if (res.status == 200 && res.data.code == 1) {
            let pinjie = res.data.info.img_big_logo
            // console.log(pinjie);
            let html = `
            <div class="swiper-container shopping-box">
                <div id="div1">
                    <ul id="lbt">
                        <li class="wai">
                            <img
                                src="${pinjie}" />
                            <div class="nei"></div>
                        </li>
                        <li class="da">
                            <img src="${pinjie}"
                                class="datu" />
                        </li>
                    </ul>
                </div>
            </div>`
            this.$('#fdj').innerHTML = html
            this.fangdajing()
        }
        // 登录过期的处理
        if (data.code == 401 && status == 200) {

            // 登录超时就清除保存的值
            localStorage.removeItem('token')
            localStorage.removeItem('user_id')

            // 跳转到购物车当登录后跳转到本页面
            location.assign('./login.html?ReturnUrl=./shopcar2.html')
        }


    }
    fangdajing() {
        let wai = document.querySelector('.wai');
        let nei = document.querySelector('.nei')
        let da = document.querySelector('.da')
        let datu = document.querySelector('.datu')

        // console.log(wai, nei, da, datu);
        wai.onmouseover = function () {
            nei.style.display = 'block'
            da.style.display = 'block'
        }
        wai.onmouseout = function () {
            nei.style.display = 'none'
            da.style.display = 'none'
        }
        wai.onmousemove = function (e) {
            let x = e.pageX - this.offsetLeft;
            let y = e.pageY - this.offsetTop;
            // console.log(x, y);
            let shubiaox = x - nei.offsetWidth / 2
            let shubiaoy = y - nei.offsetHeight / 2
            // console.log(shubiaox, shubiaoy);
            if (shubiaox <= 0) {
                shubiaox = 0
            } else if (shubiaox >= wai.offsetWidth - nei.offsetWidth) {
                shubiaox = wai.offsetWidth - nei.offsetWidth
            }
            if (shubiaoy <= 0) {
                shubiaoy = 0
            } else if (shubiaoy >= wai.offsetHeight - nei.offsetHeight) {
                shubiaoy = wai.offsetHeight - nei.offsetHeight
            }



            nei.style.left = shubiaox + 'px'
            nei.style.top = shubiaoy + 'px'


            datu.style.left = -((datu.offsetWidth - da.offsetWidth) / (wai.offsetWidth - nei.offsetWidth)) * shubiaox + 'px';
            datu.style.top = -((datu.offsetHeight - da.offsetHeight) / (wai.offsetHeight - nei.offsetHeight)) * shubiaoy + 'px';

        }
    }
    tianjiagwc() {
        // console.log(lid, yhid);
        // 加入购物车是post请求，这里发送请求并携带两个参数
        // 给添加购物车接口发送请求
        // 购物车的请求需要判断是否是登录状态，需要携带参数token
        let lid = localStorage.getItem('gid')
        let yhid = localStorage.getItem('user_id')
        const AUTH_TOKEN = localStorage.getItem('token')
        let param = `id=${yhid}&goodsId=${lid}`
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.post('http://localhost:8888/cart/add', param).then(res => {
            // console.log(res);
            // console.log(res);
            let { status, data } = res
            // console.log(status, data);
            // 判断是否添加购物车成功,成功就弹出是否跳转购物车的模态框
            if (data.code == 1 && status == 200) {
                layer.open({
                    title: '商品添加成功'
                    , content: '是否查看购物车'
                    , btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        // console.log('去购物车');
                        location.assign('./shopcar2.html')
                    }
                });
                // 当登录超时过期的时候就重新跳转登录界面
            } else if (data.code == 401 && status == 200) {

                // 登录超时就清除保存的值
                localStorage.removeItem('token')
                localStorage.removeItem('user_id')

                // 跳转到购物车
                location.assign('./login.html?ReturnUrl=./product.html')

                // 否则就弹出失败模态框
            } else {
                layer.confirm('没有登录', {
                    title: '跳转到登录页面'
                }, function () {
                    location.assign('./login.html')
                })
            }
        })

    }
















    // 封装一个获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res;
    }
}
new shopping